{% extends '_base_list.html' %}

{% block title %}
    作业中心
{% endblock %}


{% block top_css %}
    {{ super() }}
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">
{% endblock %}


<!-- Content head -->
{% block head_title %}
    作业中心
{% endblock %}
{% block head_nav %}
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">作业任务</a></li>
        <li class="active">任务列表</li>
    </ol>
{% endblock %}


<!-- Content body -->
{% block title_filter %}
    <div class="filter">
        <div class="row">
            <div class="col-xs-12 col-sm-2">
                <div class="form-group">
                    <input type="text" class="form-control" name="create_time" placeholder="请选择日期日期" autocomplete="off">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block body_operator %}
{% endblock %}

{% block body_table %}
    <table id="historyTable" class="table table-auto"></table>
{% endblock %}


{% block buttom_js %}
    {{ super() }}
    <!--bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>

    <script type="text/javascript">

        $(function () {

            bees.initServerSideSelect2(
                $('select[name="task"]'),
                {url: '{{ url_for('ops.api-task-list') }}'}
            );

            bees.initDaterangepicker($('input[name="create_time"]'),{
                opens: "right",
                timePicker: false,
                timePickerSeconds: false,
                singleDatePicker: false,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });

            // 回填和初始化默认过滤参数
            var createTimeEle = $("input[name='create_time']");

            var filterParams = JSON.parse(window.sessionStorage.getItem("filterParams"));
            if(filterParams){
                // 回填表单过滤条件
                createTimeEle.val(filterParams.create_time);

                window.sessionStorage.removeItem("filterParams");
            }else {
                // 默认表单过滤条件
                filterParams = {
                    'create_time': createTimeEle.val(),
                    'adhoc': '{{ adhoc }}'
                };
            }
            $.fn.beesTable.defaultFilterParams(filterParams);

            // 初始化表格
            var $tableEle = $("#historyTable");
            var options = {
                columns: [
                    {title: '选择', field: 'selected', radio: true},
                    {title: '任务名称', field: 'task_name', sortable: false},
                    {title: '开始时间', field: 'date_start', sortable: true},
                    {title: '结束时间', field: 'date_finished', sortable: true},
                    {title: '执行时间', field: 'timedelta', sortable: false},
                    {title: '是否完成', field: 'is_finished', sortable: false,
                        formatter: function (value, row, index, field) {
                            if(value == 0){
                                return '<i class="fa fa-close text text-danger"></i>'
                            }else if(value == 1){
                                return '<i class="fa fa-check text text-success"></i>'
                            }else{
                                return '<i class="fa fa-circle-o text text-warning"></i>'
                            }
                        }
                    },
                    {title: '是否成功', field: 'is_success', sortable: false,
                        formatter: function (value, row, index, field) {
                            if(value == 0){
                                return '<i class="fa fa-close text text-danger"></i>'
                            }else if(value == 1){
                                return '<i class="fa fa-check text text-success"></i>'
                            }else{
                                return '<i class="fa fa-circle-o text text-warning"></i>'
                            }
                        }
                    },
                    {title: '执行记录', field: 'celery_id', sortable: false,
                        formatter: function (value, row, index, field) {
                            return '<a class="btn btn-default btn-xs log" href="javascript:;" data-id='+value+'>查看</a>'
                        }
                    },
                    {title: '成功主机', field: 'success_hosts', sortable: false},
                    {title: '失败主机', field: 'failed_hosts', sortable: false}
                ],
                url:'{{ url_for("ops.api-history-list") }}',
                sortName: 'date_start',
                sortOrder: 'desc'
            };
            var table = $tableEle.beesTable(options);


            // 搜索
            bees.bindTableSearch({
                table: $tableEle,
                searches: [
                    {eventType:'change', eventSource:createTimeEle, data:function () {
                            return {'create_time': createTimeEle.val()};
                        }
                    }
                ]
            });

            // 日志记录
            $("#historyTable").on('click', '.log', function () {
                var val = $(this).data('id');
                var url = '{{ url_for("ops.celery-task-log", pk=default_pk) }}'.replace(bees.defaultPK, val);
                window.open(url, "", "width=800,height=600,left=300,top=160")
            })
        })
    </script>
{% endblock %}
